<template>
  <ElDialog
    :model-value="visible"
    title="余额调整"
    width="500px"
    :before-close="handleClose"
    destroy-on-close
  >
    <div class="balance-adjust-content">
      <ElAlert
        title="余额调整功能"
        type="info"
        description="此功能用于调整商户账户余额，支持增加或减少操作。"
        :closable="false"
        show-icon
      />

      <div class="current-info" v-if="balanceData">
        <h4>当前余额信息</h4>
        <p>
          商户：{{ balanceData.merchantName }} ({{ balanceData.merchantCode }})
        </p>
        <p>当前余额：¥{{ formatCurrency(balanceData.currentBalance) }}</p>
      </div>

      <ElForm :model="adjustForm" label-width="100px" style="margin-top: 20px">
        <ElFormItem label="调整类型">
          <ElRadioGroup v-model="adjustForm.type">
            <ElRadio value="increase">增加</ElRadio>
            <ElRadio value="decrease">减少</ElRadio>
          </ElRadioGroup>
        </ElFormItem>

        <ElFormItem label="调整金额">
          <ElInputNumber
            v-model="adjustForm.amount"
            :precision="2"
            :min="0.01"
            placeholder="请输入调整金额"
            style="width: 100%"
          />
        </ElFormItem>

        <ElFormItem label="调整原因">
          <ElInput
            v-model="adjustForm.reason"
            type="textarea"
            :rows="3"
            placeholder="请输入调整原因"
            maxlength="200"
            show-word-limit
          />
        </ElFormItem>
      </ElForm>
    </div>

    <template #footer>
      <ElButton @click="handleClose">取消</ElButton>
      <ElButton type="primary" @click="handleSubmit">确定调整</ElButton>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { reactive } from "vue";

defineOptions({ name: "WmsMerchantBalanceAdjustDialog" });

interface Props {
  visible: boolean;
  balanceData?: WMS.Basic.MerchantBalanceInfo | null;
}

defineProps<Props>();

const emit = defineEmits<{
  "update:visible": [visible: boolean];
  submit: [data: any];
}>();

const adjustForm = reactive({
  type: "increase",
  amount: 0,
  reason: "",
});

const formatCurrency = (amount: number) => {
  return (
    amount?.toLocaleString("zh-CN", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }) || "0.00"
  );
};

const handleClose = () => {
  emit("update:visible", false);
};

const handleSubmit = () => {
  emit("submit", adjustForm);
};
</script>

<style lang="scss" scoped>
.balance-adjust-content {
  .current-info {
    background: var(--el-fill-color-light);
    padding: 16px;
    border-radius: 6px;
    margin: 16px 0;

    h4 {
      margin: 0 0 12px 0;
      color: var(--el-text-color-primary);
    }

    p {
      margin: 4px 0;
      color: var(--el-text-color-regular);
    }
  }
}
</style>
